<template>
  <div>
    <CreateClassHead v-if="windows === 1"></CreateClassHead>
    <el-header class="classheader" v-if="windows === 0">
      <span>新建班级</span>
    </el-header>
    <van-form @submit="onSubmit(classname, description, optclass), CreateClass()">
      <van-field
        v-model="classname"
        name="班级名"
        label="班级名"
        placeholder="请填写班级名"
        :rules="[{ required: true }]"
      />
      <van-field
        v-model="description"
        type="textarea"
        name="班级描述"
        label="班级描述"
        placeholder="请填写班级描述"
        :rules="[{ required: true }]"
      />
      <van-cell>
        <span style="margin-right: 45px">选择课程</span>
        <el-dropdown @command="handleCommand">
          <span class="el-dropdown-link">
            <i class="el-icon-arrow-down el-icon--right">{{ opt }}</i>
          </span>
          <el-dropdown-menu slot="dropdown" class="custom-dropdown-menu">
            <el-dropdown-item
              v-for="item in option2"
              :key="item.value"
              :command="item"
              >{{ item.text }}</el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>
      </van-cell>

      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit"
          >创建班级</van-button
        >
      </div>
    </van-form>
  </div>
</template>
  
  <script>
import axios from "axios";
import CreateClassHead from "./comps/CreateClassHead.vue";
export default {
  name: "CreateCourse",
  data() {
    return {
      windows: 0,
      classname: "",
      description: "",
      opt: "请选择课程",
      optclass: 0,
      list: [],
      option2: [
        { text: "请选择课程", value: 0 },
      ],
    };
  },
  mounted() {
    if (window.innerWidth < 768) {
      this.windows = 1;
    } else {
      this.windows = 0;
    }
    axios.post("/course/AllCourse").then(response => {
    console.log(response);
    response.data.data.forEach((item) => {
        this.option2.push({
          text: item.coursename,
          value: item.id,
        });
      });
    });
  },
  methods: {
    onSubmit(classname, description, optclass) {
      axios
        .post(
          "/class/create?" +
            "classname=" +
            classname +
            "&description=" +
            description+
            "&courseId=" +
            optclass+
            "&userId="+localStorage.getItem("userId")
        )
        .then((response) => {
          // console.log(response);
          this.$router.push('/Class');
          this.$message.success("创建成功"); 
        })
        .catch((error) => {
          // console.log(error);
        });
    },
    CreateClass() {
      this.$router.push('/Class');
    },
    handleCommand(command) {
      // this.$message('click on item ' + command);
      this.opt = command.text;
      this.optclass = command.value;
      // this.$message('选择的课程是：' + command.text);
      // this.$message('选择的课程是：' + command.value);
    },
  },
  components: {
    CreateClassHead,
  },
};
</script>
  
  <style scoped>
.classheader {
  background-color: #424242;
}
.classheader span {
  /* height: 60px;
    width: 300px;
    background-color: #f42525; */
  color: #fff;
  font-size: 20px;
  text-align: center;
  line-height: 60px;
}
.flex-item {
  flex: 1;
  margin: 0 5px; /* 添加适当的间距 */
}

.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.custom-dropdown-menu {
  max-height: 200px; /* 设置最大高度 */
  overflow-y: auto; /* 启用垂直滚动条 */
}
</style>